<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui" template="/pages/template.xhtml">

    <ui:define name="screen">

        <h:form prependId="false" id="consultaComponente">

            <p:growl id="growl" />
            <p:focus /> 

            <p:panel header="Consulta de Componente" >  

                <p:commandButton value="Filtro" image="ui-icon ui-icon-circle-zoomout" title="Filtro" process="@this" tabindex="-1"
                                 onclick="filtroComponente.show()" />  

                <p:dataTable id="dataTableComponente" 
                             var="componente"                             
                             emptyMessage="Nenhum Registro"   
                             selectionMode="single"                                
                             value="#{consultaComponenteAction.consultaComponenteVo.componenteVoList}" >                   

                    <p:column headerText="Id" sortBy="#{componente.id}" filterBy="#{componente.id}">  
                        <h:outputText value="#{componente.id}" />
                    </p:column>

                    <p:column headerText="Nome" sortBy="#{componente.nome}" filterBy="#{componente.nome}">  
                        <h:outputText value="#{componente.nome}" />
                    </p:column>

                    <p:column style="width: 40px">                        
                        <p:commandButton image="ui-icon ui-icon-circle-check" title="Retornar" style="width: 35px; height: 30px" ajax="false"                                          
                                         action="#{consultaComponenteAction.redirecionar}" update="growl"
                                         actionListener="#{consultaComponenteAction.retornar}" >
                            <f:attribute name="componente" value="#{componente}" />
                        </p:commandButton>                        
                    </p:column>

                </p:dataTable>    

            </p:panel>

        </h:form>

        <h:form>
            <p:commandButton value="Principal" image="ui-icon ui-icon-home" title="Principal" ajax="false" action="principal" />

            <p:commandButton value="Cadastro" image="ui-icon ui-icon-plusthick" title="Cadastro" ajax="false" action="cadastroComponente" />                                  
        </h:form>        

        <h:form id="formFiltroComponente">

            <p:dialog widgetVar="filtroComponente"
                      modal="true" 
                      header="Filtro"                             
                      width="900"
                      height="300">

                <p:panel header="Consulta de Componente" >                

                    <h:panelGrid columns="3" >

                        <h:outputLabel for="tipoConsultaComponente" value="Tipo Consulta" />  
                        
                        <p:selectOneMenu id="tipoConsultaComponente" effect="fade" style="width: 180px" 
                                         value="#{consultaComponenteAction.consultaComponenteVo.tipoConsultaVo}" >

                            <f:selectItems value="#{consultaComponenteAction.consultaComponenteVo.tipoConsultaVoList}" />
                        </p:selectOneMenu>

                        <p:inputText id="filtro" immediate="true" value="#{consultaComponenteAction.consultaComponenteVo.filtro}" />                                       

                    </h:panelGrid>

                    <h:panelGrid columns="3">                    

                        <p:commandButton value="Consultar" image="ui-icon ui-icon-search" title="Consultar" update="growl, consultaComponente" oncomplete="filtroComponente.hide()"
                                         actionListener="#{consultaComponenteAction.consultar}" />                    

                        <p:commandButton image="ui-icon ui-icon-refresh" title="Limpar" update="consultaComponente" tabindex="-1"
                                         actionListener="#{consultaComponenteAction.limpar}" />                    

                        <h:message for="filtro" />  

                    </h:panelGrid>                        

                </p:panel>

            </p:dialog>

        </h:form>

    </ui:define>

</ui:composition>
